<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui">

	<h:form id="roleForm" prependId="false">
		<p:growl id="msg" showDetail="true" />

		<h:panelGrid>
			<p:dataTable var="role" value="#{roleManagedBean.roleList}"
				id="roleTable" rowKey="#{role.roleId}"
				selection="#{roleManagedBean.selectedRoleDTO}"
				selectionMode="single" scrollable="true">

				<p:ajax event="rowSelect" listener="#{roleManagedBean.roleSelected}"
					update=":tabview1:roleForm" />

				<p:column headerText="Role ID">
					<h:outputText value="#{role.roleId}" />
				</p:column>
				<p:column headerText="Role Name" id="roleName">
					<h:outputText value="#{role.roleName}" />
				</p:column>
				<p:column headerText="Role Description" id="roleDescription">
					<h:outputText value="#{role.roleDescription}" />
				</p:column>

			</p:dataTable>
			<p:dataTable var="permission" id="permissions"
				rendered="#{!empty(roleManagedBean.selectedRoleDTO.permissionList)}"
				value="#{roleManagedBean.selectedRoleDTO.permissionList}">

				<p:column headerText="Permission Id">
					<h:outputText value="#{permission.permissionId}" />
				</p:column>
				<p:column headerText="Permission Name">
					<h:outputText value="#{permission.permissionName}" />
				</p:column>
				<p:column headerText="Permission Description">
					<h:outputText value="#{permission.permissionDescription}" />
				</p:column>
			</p:dataTable>

			<p:spacer height="25px" />
			<h:panelGrid style="float: right;" columns="2">
				<p:commandButton value="Add" update=":tabview1:roleForm"
					action="#{roleManagedBean.addRole}" />
				<p:commandButton value="Edit" update=":tabview1:roleForm"
					action="#{roleManagedBean.editRole}" />
			</h:panelGrid>

			<p:fieldset id="roleAddEdit"
				rendered="#{roleManagedBean.addFlag || roleManagedBean.editFlag}"
				legend="Role Add/Edit">
				<h:panelGrid columns="4">
					<h:outputText value="Role Name" />
					<h:inputText value="#{roleManagedBean.roleName}" />
					<h:outputText value="Role Description" />
					<h:inputText value="#{roleManagedBean.roleDescription}" />
					<h:outputText value="Active" />
					<h:selectBooleanCheckbox value="#{roleManagedBean.active}" />
					<p:commandButton value="Save" update=":tabview1:roleForm"
						action="#{roleManagedBean.save}" />
					<p:commandButton value="Cancel" update=":tabview1:roleForm"
						action="#{roleManagedBean.cancel}" />
				</h:panelGrid>
				<p:dataTable var="permission" id="permissionsList"
					selection="#{roleManagedBean.selectedPermissions}"
					value="#{roleManagedBean.permissionDataModel}">
					<p:column selectionMode="multiple" />
					<p:column headerText="Permission Id">
						<h:outputText value="#{permission.permissionId}" />
					</p:column>
					<p:column headerText="Permission Name">
						<h:outputText value="#{permission.permissionName}" />
					</p:column>
					<p:column headerText="Permission Description">
						<h:outputText value="#{permission.permissionDescription}" />
					</p:column>
				</p:dataTable>
			</p:fieldset>

		</h:panelGrid>
	</h:form>

</ui:composition>